<template>
  <view class="part-three">
			  <u-tabs :list="list1" @click="click"></u-tabs>
    <view class="part-type">
      <view class="type-item" :class="itemIndex == index ? 'type-on' : ''" v-for="(item, index) in specialCarList" :key="index" @click="changeCarType(item, index)">
        <image class="type-img" src="../../static/logo.png" mode=""></image>
        <view class="type-box">
         <view class="type-title" v-if="item.carGroupId === 117">经济五座</view>
          <view class="type-title" v-else-if="item.carGroupId === 118">舒适五座</view>
          <view class="type-title" v-else-if="item.carGroupId === 119">豪华五座</view>
          <view class="type-title" v-else-if="item.carGroupId === 120">豪华七座</view>
          <view class="type-title" v-else-if="item.carGroupId === 121">商务七座</view>
          <view class="type-title" v-else-if="item.carGroupId === 142">经济七座</view>
					
          <view class="type-title">{{item.transportName}}-{{item.vehicleTypeName}}</view>
          <view class="type-price">
            <text class="type-price-icon">￥</text>
            <text class="type-price-num">{{ item.price}}</text>
            <text class="type-price-icon-none">￥</text>
            <text class="type-price-price-none">220</text>
          </view>
          <view class="type-show">
            <!-- <text class="type-show-distance">{{ item.kilometer }}km</text> -->
            <!-- <text class="type-show-time">{{ item.minutes }}分钟</text> -->
          </view>
        </view>
      </view>
    </view>
    <!--最底下按钮-->
    <view class="flex bottom-fix">
      <view class="cu-bar bg-white half-width">
        <view class="item-width-1">
          <view>
            <text class="font-28-333333" style="margin-right: 20upx">总金额</text>
            <text class="text-sm text-orange2">¥</text>
            <text class="text-lg font-bold text-orange2">{{ price | setPrice }}</text>
          </view>
        </view>
      </view>
      <view class="cu-bar bg-gradual-orange submit-btn justify-center" @click="handleSubmit">立即预约</view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["specialCarList"]),
  },
  filters: {
    setPrice(peice) {
      return peice.toFixed(2);
    },
    setDistance: function (e) {
      var n = "";
      if (e) {
        if (e >= 1000) {
          n = (e / 1000).toFixed(2) + "公里";
        } else {
          n = e + "米";
        }
      } else {
        n = "0米";
      }
      return n;
    },
    // 秒转换成day、hour、minutes、seconds
    formatSecond: function (second) {
      const days = Math.floor(second / 86400);
      const hours = Math.floor((second % 86400) / 3600);
      const minutes = Math.floor(((second % 86400) % 3600) / 60);
      const seconds = Math.floor(((second % 86400) % 3600) % 60);
      const forMatDate = {
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds,
      };
      return forMatDate;
    },
  },
  data() {
    return {
      itemIndex: 0,
      type: 1, //1预约用车2接送机
      typeForm: {},
      price: 0,
    };
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
    console.log('this',this.type);
    if (this.type == 1) {
      uni.setNavigationBarTitle({
        title: "预约用车",
      });
    } else if (this.type == 2) {
      uni.setNavigationBarTitle({
        title: "接送机",
      });
    } else if (this.type == 3) {
      uni.setNavigationBarTitle({
        title: "港澳用车",
      });
    } else if (this.type == 4) {
      uni.setNavigationBarTitle({
        title: "顺风车",
      });
    }
    this.typeForm = this.specialCarList[0];
    this.price = this.typeForm.price;
  },
  methods: {
    changeCarType(item, index) {
      this.typeForm = item;
      this.itemIndex = index;
      console.log(this.typeForm);
      this.price = this.typeForm.price;
    },
    handleSubmit() {
      this.$store.commit("setPrice", this.price);
      this.$store.commit("setServiceType", this.type);
      this.$store.commit("setSpecialCarForm", this.typeForm);
      this.$store.commit("setCarlevel", this.typeForm.carGroupId);
      this.$store.commit("setCityCode", this.typeForm.cityCode);
      uni.navigateTo({
        url: "../pay/index",
      });
    },
  },
};
</script>

<style lang="scss">
.part-three {
  height: 100vh;
  width: 100%;
  background: linear-gradient(180deg, #e2effc 0%, #ffffff 64%);
  padding-top: 38upx;

  .part-time {
    padding: 4upx 0 42upx 0;
  }

  .time-box {
    width: 750upx;
    height: 148upx;

    .time-item {
      width: 288upx;
      height: 148upx;
      margin-right: 10upx;
      border-radius: 10upx;
      background-color: #ffffff;
      border-radius: 10upx;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 22upx;
      box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.08);

      .time-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 30upx;
        font-weight: bold;
      }

      .time-peice {
        font-size: 24upx;
        color: #666666;
        margin-top: 20upx;
      }
    }
  }

  .part-type {
    padding: 0 30upx;

    .type-item {
      background: #ffffff;
      box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.08);
      border-radius: 10upx;
      padding: 30upx;
      display: flex;
      margin-bottom: 10upx;
      border: 4rpx solid #ffffff;

      .type-img {
        width: 148upx;
        height: 148upx;
      }

      .type-box {
        margin-left: 22upx;

        .type-title {
          font-size: 34upx;
          font-weight: bold;
          color: #333333;
        }

        .type-show {
          margin-top: 28upx;
          font-size: 28upx;

          .type-show-distance {
            margin-right: 30upx;
          }
        }

        .type-price {
          margin-top: 28upx;

          .type-price-icon {
            font-size: 24upx;
            color: #ff4e18;
            margin-right: 5upx;
          }

          .type-price-num {
            font-size: 38upx;
            color: #ff4e18;
            font-weight: bold;
          }

          .type-price-icon-none {
            font-size: 14upx;
            color: #999999;
            margin-left: 20upx;
          }

          .type-price-price-none {
            font-size: 22upx;
            color: #999999;
            text-decoration: line-through;
          }
        }
      }
    }

    .type-on {
      border: 4rpx solid #3888fc;
    }
  }
}

/* 最底部的按钮 */
.flex {
  display: flex;
}

.bottom-fix {
  position: fixed;
  bottom: 0px;
  width: 100%;
  box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.08);
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  background-color: #ffffff;
}

.cu-bar {
  display: flex;
  position: relative;
  align-items: center;
  min-height: 98upx;
  justify-content: space-between;
}

.bg-white {
  background-color: #ffffff;
  color: #808080;
}

.half-width {
  padding: 0 30upx;
  flex: 1;
}

.item-width-1 {
  width: 70%;
}

.font-28-333333 {
  color: #333333;
  font-size: 28upx;
}

.text-sm {
  font-size: 22upx;
  margin-right: 10upx;
}

.text-orange2 {
  color: #ff4e18;
}

.text-lg {
  font-size: 36upx;
}

.font-bold {
  font-weight: bold;
}

.item-width-2 {
  width: 30%;
  padding-left: 30upx;
  border-left: 1upx solid rgba(0, 0, 0, 0.1);
}

.align-center {
  align-items: center;
}

.font-28-666666 {
  color: #666666;
  font-size: 28upx;
}

.bg-gradual-orange {
  background: linear-gradient(0deg, #2281ff 0%, #4e9afd 100%);
  color: #ffffff;
}

.submit-btn {
  width: 300upx;
  justify-content: center;
  font-size: 36upx;
  font-weight: bold;
}

.justify-center {
  justify-content: center;
}
</style>
